<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>确认支付</title>
		<link href="../css/mui.min.css" rel="stylesheet"/>
    	<link rel="stylesheet" type="text/css" href="../css/confirmPay.css"/>
    	<link rel="stylesheet" type="text/css" href="../css/public.css"/>
    	<script src="../js/mui.min.js" type="text/javascript" charset="UTF-8"></script>
    	<script src="../js/jquery.3.2.1.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript" charset="utf-8">
      		mui.init(); 
    	</script>
		<script type="text/javascript" src="../js/fastclick.js"></script>

		<style>


			html input[disabled]{
				font-size: 40px;
				text-align: center;
				width: 14%;
				height: 45px;
				border-left: 1px solid;
				border-bottom: 1px solid;
				border-top: 1px solid;

			}
			.pass_right{
				border-right:1px solid;
			}
			.btn_number{
				width:33%;
			}

			.btn_next {
				margin-top: 30px;
				width: 100%;
				height: 40px;
				background: #0099FF;
			}

			.btn_next:hover {
				background: coral;
			}

			#password {
				font: 2em Verdana, Sans-Serif;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				display: flex;
				justify-content: space-between;
			}

			#keyboard {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			#keyboard li {
				float: left;
				margin:-1px 2px 2px -1px;
				width: 33%;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background: #fff;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
			}

			#keyboard .tab {
				width: 33%;
			}

			#keyboard .cancle {
				width: 33%;
			}

			#keyboard .delete {
				width: 33%;
			}

			.on {
				display: none;
			}

			#keyboard li:hover {
				position: relative;
				top: 1px;
				left: 1px;
				border-color: #e5e5e5;
				background: #A8A8A8;
				cursor: pointer;
			}
		</style>
		<script>
            function init(){
                var width=$(window).width();
                var height=$(window).height();
                $("body").css("height",height);
                $("body").css("width",width);
            }
            window.addEventListener('load', function() {
                FastClick.attach(document.body);
            }, false);
		</script>
	</head>
	<body id="confirmPay">
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">确认支付</h1>
		</header>
		<div class="mui-content">
			<div class="pay">
				<ul id="payMode">
			    	<li class="curr">
			    		<span class="fl">&#xe6a8;</span>
			    		<p class="p1 fl">支付宝</p>
			    		<p class="p2 fr">推荐有支付宝账号用户使用</p>
			    	</li>
			    	<li>
			    		<span class="fl">&#xe6a8;</span>
			    		<p class="p1 fl">微信支付</p>
			    		<p class="p2 fr" style="line-height: 2.5rem;">微信快捷支付</p>
			    	</li>
			    	<li>
			    		<span class="fl">&#xe6a8;</span>
			    		<p class="p1 fl">中国银联</p>
			    		<p class="p2 fr">储蓄卡、信用卡直接支付不需网银</p>
			    	</li>
			    	<li>
			    		<span class="fl">&#xe6a8;</span>
			    		<p class="p1 fl">华夏银行</p>
			    		<p class="p2 fr">借记卡、信用卡直接支付</p>
			    	</li>
			    	<li>
			    		<span class="fl">&#xe6a8;</span>
			    		<p class="p1 fl">招商银行</p>
			    		<p class="p2 fr">借记卡、信用卡都可使用</p>
			    	</li>
			    </ul>
			    <div class="payFooter">
			    	<p>￥123.0</p>
			    	<p><i>&#xe648;</i>亲密代付</p>
			    	<button id="buy">立即购买</button>
			    </div>
			</div>
			<div class="fk">
				<div class="fkCon">
					<div class="header">
						<span class="close fl" id="guanbi">&#xe6a6;</span>
						<h3 class="fl">确认付款</h3>
						<span class="help fr">&#xe633;</span>
					</div>
					<h2>￥123.00</h2>
					<div class="ddxx">订单信息<span>乐裳订单——芦苇微微文艺格子连衣裙</span></div>
					<div class="fkfs">付款方式<span>建设银行储蓄卡</span></div>
					<button id="fk">立即付款</button>
				</div>
			</div>


			<div class="zfmm">
				<div class="zfmm_con" onload="init()">
					<div style="position: relative;top: -10.8rem">
						<div style="text-align: center;padding-top: 10px;">
							<span id="set_text" style="font-size: large;"></span>
						</div>
						<div style="padding-top: 20px;text-align: center;">
							<form id="password" >
								<input readonly class="pass" type="password" maxlength="1" value="">
								<input readonly class="pass" type="password" maxlength="1" value="">
								<input readonly class="pass" type="password" maxlength="1" value="">
								<input readonly class="pass" type="password" maxlength="1" value="">
								<input readonly class="pass" type="password" maxlength="1" value="">
								<input readonly class="pass pass_right" type="password" maxlength="1" value="">
							</form>
						</div>
					</div>
					<div id="keyboardDIV" class="btn clear">
						<ul class="clear">
							<li>1</li>
							<li>2</li>
							<li>3</li>
							<li>4</li>
							<li>5</li>
							<li>6</li>
							<li>7</li>
							<li>8</li>
							<li>9</li>
							<li></li>
							<li>0</li>
							<li><p id="pay">&#xe6a6;</p></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/ladingPasswordConfirm.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#payMode li').click(function(){
					$(this).addClass("curr").siblings().removeClass("curr");
				});
				$("#buy").click(function(){
					$(".fk").css("display","block");
				});
				$("#fk").click(function(){
					$(".zfmm").css("display","block");
					$(".fk").css("display","none");
				});
				$("#back").click(function(){
					$(".zfmm").css("display","none");
					$(".fk").css("display","block");
				});
				$("#guanbi").click(function(){
					$(".fk").css("display","none");
				});
			});
			document.getElementById("pay").addEventListener("tap",function(){
				mui.openWindow({
					url:"paySuccess.html",
					id:"pay",
					createNew:true,
					show:{
						aniShow:"slide-in-right",
						duration:200
					},
					waiting:{
						title:"正在加载..."
					}
				});
			});
		</script>
	</body>
</html>
